<template>
    <div class="goodDetail">
        <h2>categoryDetail</h2>
        <van-swipe :autoplay="3000" class="swipe-container">
            <van-swipe-item v-for="(image, index) in data.gallery" :key="index" class="swipe-item">
              <img v-lazy="image.img_url" />
            </van-swipe-item>
        </van-swipe>
        <div class="commit">
            <p>30天无忧退货</p>
            <p>48小时快速退款</p>
            <p>满88元免邮费</p>
        </div>
        <div class="info">
            <div>
                <p>{{info.name}}</p>
                <p>{{info.goods_brief}}</p>
                <p>{{info.retail_price}}</p>
            </div>
            <van-cell is-link @click="show = true" class="choice">
                <p>商品展示</p>
                <img src="@/assets/imgs/icons/选中.png" alt="">
            </van-cell>
            <van-action-sheet v-model="show">
                <div class="content">内容</div>
            </van-action-sheet>
            <van-grid :border="false" :column-num="1" class="attribute">
                <h2>商品规格</h2>
                <div v-for="item in data.attribute" :key="item.name" class="attribute-list">
                    <p>{{item.name}}</p>
                    <p>{{item.value}}</p>
                </div>
            </van-grid>
            <div v-html="info.goods_desc"></div>
            <div class="issue">
                <div v-for="item in issue" :key="item.id">
                    <p>{{item.question}}</p>
                    <p>{{item.answer}}</p>
                </div>
            </div>
            
        </div>
        <div class="productList">
            <div>
                <h2>大家都在看</h2>
            </div>
            <van-grid :border="false" :column-num="2" class="good-list">
                <van-grid-item v-for="item in productList" :key="item.id" class="good">
                  <img :src="item.list_pic_url" alt="">
                  <p>{{item.name}}</p>
                  <p>{{item.retail_price}}</p>
                </van-grid-item>
              </van-grid>
        </div>
        <!-- 加入购物车 -->
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
            <van-goods-action-icon icon="cart-o" text="购物车" />
            <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
            <van-goods-action-button type="warning" text="加入购物车" />
            <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
    </div>
</template>

<script>
import {detailaction} from '@/axios/index'
export default {

    name: 'categoryDetail',

    data() {
        return {
            data:{},
            show:false,
            info:{},
            issue:[],
            productList:[]
        };
    },
    async created(){
        let res = await detailaction({'id':this.$route.params.id,'openId':localStorage.getItem('openId')})
        console.log(res);
        this.data=res;
        this.info=res.info;
        this.issue=res.issue;
        this.productList=res.productList;
    },
    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style>
img{
    width: 750px;
}
.content {
    padding: 16px 16px 160px;
  }
</style>
<style scoped lang="scss">
.goodDetail{
    .swipe-container{
        width: 750px;
        .swipe-item{
            img{
                width: 100%;
            }  
        }
    }
    .commit{
        display: flex;
        justify-content: space-evenly;
        background-color: #000;
        color: #fff;
    }
    .info{
        width: 750px;
        .choice{
                position: relative;
            div{
                
            }
            img{
               position: absolute;
               top: 0;
               right:0 
            }
        }
        .attribute{
            h2{
                width: 100%;
            }
            .attribute-list{
                display: flex;
                flex-wrap: nowrap;
            }
        }
    }
    .productList{
        .good-list{
            .good{
                img{
                    width: 300px;
                }
            }
        }
    }
}
</style>